<!-- 跟单-发起人详情 -->
<template>
  <div class="bg b1" @viewappear="viewappear"  ref="content">

     <list class="list">
      <!--刷新-->
      <refresh class="refresh" @refresh="refresh" :display="isRefresh ? 'show' : 'hide'">
        <loading-indicator class="load text1"></loading-indicator>
      </refresh>

      <template v-if="data">

        <cell>
          <div class="head bg2">
            <div class="row acenter">
              <LImage class="img-avatar" :src="data.user.avatar"></LImage>
              <text class ="font32 text1">{{data.user.nickName}}</text>


              <div class="all"></div>
              <div class="but-dingyue" :class="[data.user.isFollow ? 'no-b1' : 'main-b1']" @click="httpsFollowUser">
                <text class="font26 fontz" :class="[data.user.isFollow ? 'text3' : 'main-t1']">{{data.user.isFollow ? T('取关') : T('关注')}}</text>
              </div>

              <div class="but-dingyue" :class="[data.user.isSubscriber==1 ? 'no-b1' : 'main-b1']" @click="dingyueClick">
                <LImage v-if="data.user.isSubscriber==0" class="img-dingyue" :src="Config.img('dingyue.png')"></LImage>
                <text class="font26 fontz" :class="[data.user.isSubscriber==1 ? 'text3' : 'main-t1']">{{data.user.isSubscriber==1 ? T('已订阅') : T('订阅')}}</text>
              </div>

            </div>

            <div class="height40"></div>
            <text class ="font32 text1">{{data.user.mark}}</text>

            <div class="height10"></div>
            <text class ="font24 text3">{{'使用Vtrading量化交易第'+data.user.timeLent+'天'}}</text>
          </div> 

          <div class="info bg2">
            <div class="column all">
              <div class="row jbetween">
                <text class="font24 text2">粉丝</text>
                <text class="font24 fontz text1">{{data.followNumber}}</text>
              </div>

              <div class="height20"></div>
              <div class="row jbetween">
                <text class="font24 text2">历史策略数</text>
                <text class="font24 fontz text1">{{data.executeNumber}}</text>
              </div>

              <div class="height20"></div>
              <div class="row jbetween">
                <text class="font24 text2">交易胜率</text>
                <text class="font24 fontz text1">{{data.warnRate+'%'}}</text>
              </div>
            </div>
            <div class="info-line line1"></div>
            <div class="column all">
              <div class="row jbetween">
                <text class="font24 text2">被复制次数</text>
                <text class="font24 fontz text1">{{data.copyNumber}}</text>
              </div>

              <div class="height20"></div>
              <div class="row jbetween">
                <text class="font24 text2">历史盈利策略数</text>
                <text class="font24 fontz text1">{{data.eraningNumber}}</text>
              </div>

              <div class="height20"></div>
              <div class="row jbetween">
                <text class="font24 text2">最大回撤</text>
                <text class="font24 fontz text1">{{data.maxDrawdown+'%'}}</text>
              </div>
            </div>
          </div>

          <VSubMenu class="menu" :type="0" :menu="menu" :menus="menus" @menuClick="menuClick" />
        </cell>

        <cell v-if="menu==2">
          <VPoint class="cell-point" 
          v-for="(item, index) in points" 
          :key="menu+''+index" :item="item"
          @info="infoClick" @func="funcClick"
          @zhan="httpUnlikeLike" @share="shareClick" />

          <!-- 无更多数据 -->
          <div class="genduo" v-if="pageMax">
            <text class="font22 text3">{{T('没有更多数据')}}</text>
          </div>
        </cell>

        <cell v-else>
          <VStrategyCell class="cell bg2" 
          v-for="(item, index) in datas" 
          :key="menu+''+index" :item="item"
          @cell="cellClick"/>
          <div class="genduo-bg">
            <text class="font22 text3">{{T('没有更多数据')}}</text>
          </div>
        </cell>

        <loading v-if="menu==2 && !pageMax" 
        class="refresh" :display="isLoadinging ? 'show' : 'hide'"
        @loading="httpQueryPointLoading">
          <loading-indicator class="load text1"></loading-indicator>
        </loading>
        
      </template>
    </list>



    <!--弹出菜单-->
    <div class="func" v-if="showFunc" @click="(showFunc = false)">

      <div class="func-frame" ref="func" :style="{'top':menuTop}">
        <div class="row jend">
          <LImage class="func-jiao" v-if="menuFace" :src="Config.img('function-sanjiao.png')"></LImage>
        </div>
        <div class="func-content bg4">
          <text class="font28 text2 func-text"  v-for="(item, index) in funcs" v-bind:key="index" 
          @click="funcClickx(item)">{{T(item)}}</text>
        </div>
        <div class="row jend">
          <LImage class="func-jiao" v-if="!menuFace" :src="Config.img('function-sanjiaox.png')"></LImage>
        </div>
      </div>
    </div>
  </div>
</template>

<script>


//功能
import jconfig from "@/_js/config";
import jbroadcast from "@/_js/broadcast";
import jnavigator from "@/_js/navigator";
import jmodal from "@/_js/modal";
import jmath from "@/_js/math";
import jtime from "@/_js/time"
import jhttps from "@/_js/https";

const weexFunction = weex.requireModule("WeexFunction");
const dom = weex.requireModule("dom");

import I18N from "@/_i18n/i18n";
var T = I18N.t;
weexFunction.setTitle(T('跟单发起人'));

//组件
import VSubMenu from '@/_public/VSubMenu.vue' 
import VStrategyCell from './view/VStrategyCell.vue'
import VPoint from './view/VPoint.vue'
export default {

  components: {
    VSubMenu,
    VStrategyCell,
    VPoint
  },

  data() {
    return {
      T: T,
      Config:jconfig,

      userIdx:'',

      menu: 0,
      menus:[T('当前策略'), T('历史策略'), T('历史观点')],

      isRefresh:false, //显示刷新
      data:undefined, // 数据源
      datas:[],

      menuTop: 0, //功能菜单上距离
      menuFace: true, //功能菜单方向：true 向上  false向下
      showFunc:false, //true 显示功能菜单
      funcs:[T('举报')], //功能菜单

      pageNo:0, //页码
      isRefresh:false, //显示刷新
      pageMax:false, //turn最大页面
      isLoadinging:false, //显示加载
      expense:'', //费用
      points:[],

      itemMap:undefined //当前操作对象
    };
  },


  mounted() {
    jconfig.init(()=>{
      this.userIdx = jnavigator.getParam('userId');
      this.refresh();
    },[jconfig.OPT_UP_DOWN]);
  },

  methods: {

    viewappear() {
    },

    initPoint(datas) {

      for (let index = 0; index < datas.length; index++) {
        var data = datas[index];

        var timestamp = new Date().getTime();
        var cha = timestamp - data.createTime;
        if (cha < 30000) {
          data.avatar == T('刚刚');
        } else if (cha < 60000) {
          data.avatar == T('1分钟前');
        } else {
          data.time = jtime.getTime(data.createTime, 'y/M/d H:m');
        }
        data.avatar = data.avatar ? data.avatar : jconfig.img('touxiang.png');
      }
      return datas;
    },

    refresh() {
      if (this.isRefresh) return;
      this.isRefresh = true;
      this.httpInitiatorDetail();
    },

    /******************************* https */
    //http跟单人详情
    httpInitiatorDetail() {
      
      var param = {'teacherUserId': this.userIdx};
      jhttps.post("followNew/personalHomePage",param,true,(data) => {

        this.isRefresh = false;
        if (data.status == 200) {
          
          data = data.data;


          var user = data.user;
          user.avatar = user.avatar ? user.avatar : jconfig.img('view_image_portrait_normal.png');
          user.mark = user.mark ? user.mark : '这个用户很懒，什么都没写…';
          user.timeLent = jtime.getTimeLength(user.registerTime, undefined, 'dd');

          data.warnRate = data.warnRate ? jmath.cheng(data.warnRate, 100, 2, 2) : '0';
          data.maxDrawdown = data.maxDrawdown ? data.maxDrawdown : '0';

          this.data = data;
          this.menuClick(this.menu)
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //关注
    httpsFollowUser() {
      if (!jconfig.forceLogin()) return;

      jmodal.showLoad();
      var param = {'teacherUserId': this.userIdx};
      var url = this.data.user.isFollow ? "followNew/cancelFollowUser" : "followNew/followUser";
      jhttps.post(url,param,true,(data) => {
        
        jmodal.hideLoad();
        if (data.status == 200) {

          if (this.data.user.isFollow) {

            this.data.user.isFollow = false;
            jmodal.toast('取注成功');
          } else {

            this.data.user.isFollow = true;
            jmodal.toast('关注成功');
          }
        } else {
          jmodal.toast(data.msg);
        }
      });
    },
    
    //http观点-刷新
    httpQueryPoint() {
      
      jmodal.showLoad();
      var param = {'pageNo':1, 'userId':this.data.user.userId};
      jhttps.post("point/queryPoint",param,true,(data) => {
        jmodal.hideLoad();
        if (data.status == 200) {

          data = data.data;
          this.expense  = data.expense;
          this.points = this.initPoint(data.list);
          this.pageNo = 1;
          this.pageMax = this.points.length < 20;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http观点-加载
    httpQueryPointLoading() {
      if(this.menu!=2) return;
      
      if (this.pageMax || this.isRefresh || this.isLoadinging) return;
      this.isLoadinging = true;

      var param = {'pageNo': this.pageNo+1, 'userId':this.data.user.userId};
      jhttps.post("point/queryPoint",param,true,(data) => {
          this.isLoadinging = false;
        if (data.status == 200) {

          data = data.data;
          var datas = this.initPoint(data.list);
          this.points.push(...datas);
          this.pageNo++;
          this.pageMax = datas.length < 20;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http点赞
    httpUnlikeLike(item) {
      if(!jconfig.forceLogin()) return;

      jmodal.showLoad();
      var param = {'id':Number(item.id)};
      var url = item.isLike == 1 ? 'point/unlike' : 'point/giveALike';
      jhttps.post(url, param,true,(data) => {

        jmodal.hideLoad();
        if (data.status == 200) {
          
          var id = item.id;
          var isLike = item.isLike == 1 ? 0 : 1;
          var likeNum = isLike == 1 ? jmath.jia(item.likeNum, 1) : jmath.jian(item.likeNum, 1);
          likeNum = likeNum < 0 ? 0 : likeNum;
          item.isLike = isLike;
          item.likeNum = likeNum;
          jbroadcast.send('PointUnlike', {id, isLike, likeNum});

        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http订阅
    httpSubscribe() {

      jmodal.showLoad();
      var param = {'userId': this.data.user.userId};
      jhttps.post("point/subscribe", param, true,(data) => {
        jmodal.hideLoad();
        if (data.status == 200) {
          this.data.user.isSubscriber = 1;
          this.data.user.endTime = new Date().getTime() + 2592000000;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http取消订阅
    httpCancelSubscribe() {
      jmodal.showLoad();
      var param = {'userId': this.data.user.userId};
      jhttps.post("point/cancelSubscribe", param, true,(data) => {
        jmodal.hideLoad();
        if (data.status == 200) {
          this.data.user.isSubscriber = 0;
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    //http举报
    httpReport(item, reportReason) {
      jmodal.showLoad();
      var param = {'id': Number(item.id), 'reportReason':reportReason};
      jhttps.post("point/report", param, true,(data) => {
        jmodal.hideLoad();
        if (data.status == 200) {
          jmodal.toast('举报成功');
        } else {
          jmodal.toast(data.msg);
        }
      });
    },

    /********************************** 点击方法*/
    //菜单点击
    menuClick(index){
      this.menu = index;
      if (index == 0) {
         this.datas = this.data.executeList;
      } else if (index == 1) { 
        this.datas =this.data.executeHistoryList;
      } else {
        this.httpQueryPoint();
      }
    },

    //策略点击
    cellClick(item) {
      return;

      var url = this.menu == 0 ? "follw/UFollwStrategyInfo" : "follw/UFollwStrategyInfoHistory";
      var param = {'executeId':item.executeId};

      jbroadcast.subscribeOnce(jbroadcast.EXECUTE_UPDATE,()=>{

        this.pageNo1 = 0;
        this.max1 = false;
        this.strategys = [{}];

        this.pageNo2 = 0;
        this.max2 = false;
        this.historys = [{}];

        this.isSilent = true;
        this.httpInitiatorDetail();
      });

      jnavigator.open(item.followName, url,param);
    },

    //观点详情
    infoClick(item){
      var param = {'id':item.id};
      jnavigator.open('', 'point/PointInfo', param);
      jbroadcast.subscribeOnce('PointSubscribe', (map)=>{
        this.data.user.isSubscriber = map.isSubscriber;
        this.data.user.endTime = map.endTime;
      });
      jbroadcast.subscribeOnce('PointUnlike', (map)=>{
        item.isLike = map.isLike;
        item.likeNum = map.likeNum;
      });
    },

    //订阅
    dingyueClick(){

      if(!jconfig.forceLogin()) return;

      if(this.data.user.isSubscriber==1) {

        var parm = {'title':T("取消订阅"),
                  'message':T("取消订阅后，将无法收到该用户实时观点信息通知")+'。'};
        jmodal.confirm(parm, (bool)=>{
          if (bool == "true") {
            this.httpCancelSubscribe();
          }
        });
        return;
      }

      var timestamp = new Date().getTime();
      if (this.data.user.endTime && this.data.user.endTime > timestamp) {

        var parm = {'title':T("开启订阅"),
                    'message':T("开启订阅后，将收到该用户的实时观点信息通知")+'。'+T('您已支付过费用，此次订阅不会重复收费')+'，'+T('费用')+this.data.user.expense+'VTN/'+T('月')+'。'};
        jmodal.confirm(parm, (bool)=>{
          if (bool == "true") {
            this.httpSubscribe();
          }
        });
        return;
      }

      var parm = {'title':T("开启订阅"),
                  'message':T("开启订阅后，将收到该用户的实时观点信息通知")+'，'+T('费用')+this.data.user.expense+'VTN/'+T('月')+'。'};
      jmodal.confirm(parm, (bool)=>{
        if (bool == "true") {
          this.httpSubscribe();
        }
      });
    },

    //功能
    funcClick(item, event){
      
      this.itemMap = item;
      dom.getComponentRect(this.$refs.content, (contentFrame)=>{
        var contentHeight = contentFrame.size.height;
        var funcsHeight = 80 * this.funcs.length + 29;
        var y = event.position.y - 80 + funcsHeight;
        if (y > contentHeight) {
          this.menuFace = false;
          this.menuTop = event.position.y - funcsHeight - 220 + "px";
        } else {
          this.menuFace = true;
          this.menuTop = event.position.y - 120 + "px";
        }
        this.showFunc = true;
      });
    },

    funcClickx(item) {

      this.showFunc = false;
      if (item == T('举报')) {

        var parm = {'title':T("举报原因"), 
                    'placeholder':T("请输入举报原因"), 
                    'max':30}
        jmodal.prompt(parm, (value)=>{
          if (!value.length) {
            jmodal.toast(T('输入不能为空'));
            return;
          };
          this.httpReport(this.itemMap, value);
        });
      }

    },

    //分享
    shareClick() {
      weexFunction.shareApp();
    }
  },
};
</script>

<style src="@/_css/style.css"></style>
<style scoped>
.bg {
  width: 750px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.genduo {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 750px;
  height: 100px;
}

/***********************************列表*/
.list {
  width: 750px;
  margin-top: 2px;
}

/*********************************** 头部*/
.head {
  flex-direction: column;
  width: 750px;
  padding: 40px;
}
.img-avatar {
  width: 96px;
  height: 96px;
  border-radius: 48px;

  margin-right: 30px;
}
.but-follow {
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 25px;
  border-width: 2px;
  padding: 0 20px;
}
.but-dingyue {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 50px;
  border-radius: 25px;
  border-width: 2px;
  padding: 0 20px;
  margin-right: 10px;
}
.img-dingyue {
  width: 25px;
  height: 25px;
}
/*********************************** 信息*/
.info {
  flex-direction: row;
  width: 710px;
  border-radius: 20px;
  padding: 40px;
  margin-left: 20px;
  margin-top: 20px;
}
.info-line {
  width: 1px;
  margin: 0 30px;
}

/*********************************** 菜单*/
.menu {
  width: 750px;
  height: 88px;
  margin-top: 20px;
  margin-bottom: 10px;
}

/*********************************** 列表*/
.cell {
  width: 710px;
  height: 200px;
  margin-left: 20px;
  margin-bottom: 20px;
}
.cell-point {

}

/*********************** 刷新*/
.refresh {
  width: 750;
  flex-direction: row;
  justify-content: center;
}
.load {
  margin-top: 16px;
  height: 40px;
  width: 40px;
}
.tipe {
  margin-left: 60px;
  margin-right: 60px;
  margin-top: 40px;
  margin-bottom: 140px;
}
.tipe-text {
  line-height: 30px;
}
.genduo-bg {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 750px;
  height: 100px;
}

/*********************************** 功能弹窗*/
.func{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9;
}
.func-frame {
  position: absolute;
  right: 22;
}
.func-jiao {
  width: 28px;
  height: 20px;
  margin-right: 20px;
}
.func-content {
  border-radius: 16px;
  
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
  padding-right: 40px;
}
.func-text {
  height: 80px;
  line-height: 80px;
  text-align: center;
}
</style>
